<div style="padding:20px">
	<div id="dashboard_chart" class="morrischart" style="height:300px;width:100%"></div>
	<table class="table table-bordered table-responsive">
		<thead>
			<tr>
				<th class="col-padding-1">
					<div class="pull-left">
						<div class="h4 no-margin">访客</div>
						<small><?php echo $aggregates['visits']['formatted_value']?></small>
					</div>
					<span class="pull-right line"><?php echo implode(',',$spark['visits'])?></span>	
				</th>
				<th class="col-padding-1">
					<div class="pull-left">
						<div class="h4 no-margin">UV</div>
						<small><?php echo $aggregates['uniqueVisitors']['formatted_value']?></small>
					</div>
					<span class="pull-right line"><?php echo implode(',',$spark['uniqueVisitors'])?></span>	
				</th>
				<th class="col-padding-1">
					<div class="pull-left">
						<div class="h4 no-margin">PV</div>
						<small><?php echo $aggregates['pageViews']['formatted_value']?></small>
					</div>
					<span class="pull-right line"><?php echo implode(',',$spark['pageViews'])?></span>	
				</th>
				<th class="col-padding-1">
					<div class="pull-left">
						<div class="h4 no-margin">停留时长</div>
						<small><?php echo $aggregates['visitDuration']['formatted_value']?></small>
					</div>
					<span class="pull-right line"><?php echo implode(',',$spark['visitDuration'])?></span>	
				</th>
				<th class="col-padding-1">
					<div class="pull-left">
						<div class="h4 no-margin">跳出率</div>
						<small><?php echo $aggregates['bounceRate']['formatted_value']?></small>
					</div>
					<span class="pull-right line"><?php echo implode(',',$spark['bounceRate'])?></span>	
				</th>
			</tr>
		</thead>	
	</table>
	<div class="row">
		<div class="col-md-6">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<div class="panel-title">浏览器</div>
					<div class="panel-options">
						<a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>
						<a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
						<a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
						<a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
					</div>
				</div>
				<table class="table table-bordered table-responsive table-striped">
					<thead><tr><th>名称</th><th>访问量</th><th>停留时长</th><th>UV</th><th>PPV</th><th>跳出率</th></tr></thead>
					<tbody>
						<?php foreach($browser['resultsRows'] as $v){?>
						<tr>
							<td><?php echo $v['browserType']['value']?></td>
							<td><?php echo $v['visits']['value']?></td>
							<td><?php echo $v['visitDuration']['formatted_value']?></td>
							<td><?php echo $v['uniqueVisitors']['value']?></td>
							<td><?php echo $v['pagesPerVisit']['value']?></td>
							<td>
								<span class="label label-<?php echo $v['bounceRate']['value']>0.8?'danger':'info'?>"><?php echo $v['bounceRate']['formatted_value']?></span>
							</td>
						</tr>
						<?php }?>
					</tbody>
				</table>
			</div>
		</div>
		
		<div class="col-md-6">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<div class="panel-title">操作系统</div>
					<div class="panel-options">
						<a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>
						<a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
						<a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
						<a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
					</div>
				</div>
				<table class="table table-bordered table-responsive table-striped">
					<thead><tr><th>名称</th><th>访问量</th><th>停留时长</th><th>UV</th><th>PPV</th><th>跳出率</th></tr></thead>
					<tbody>
						<?php foreach($os['resultsRows'] as $v){?>
						<tr>
							<td><?php echo $v['osType']['value']?></td>
							<td><?php echo $v['visits']['value']?></td>
							<td><?php echo $v['visitDuration']['formatted_value']?></td>
							<td><?php echo $v['uniqueVisitors']['value']?></td>
							<td><?php echo $v['pagesPerVisit']['value']?></td>
							<td>
								<span class="label label-<?php echo $v['bounceRate']['value']>0.8?'danger':'info'?>"><?php echo $v['bounceRate']['formatted_value']?></span>
							</td>
						</tr>
						<?php }?>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	
	<div class="row">
		<div class="col-md-4">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<div class="panel-title">地区分布</div>
					<div class="panel-options">
						<a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>
						<a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
						<a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
						<a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
					</div>
				</div>
				<div class="panel-body no-padding scrolldiv" data-width="100%" data-height="420">
					<table class="table table-bordered table-responsive table-striped">
						<thead><tr><th>国家</th><th>访客量</th><th>停留时长</th><th>UV</th><th>PPV</th><th>跳出率</th></tr></thead>
						<tbody>
							<?php foreach($region['resultsRows'] as $v){?>
							<tr>
								<td><a href="stats/state_traffic?country=<?php echo $v['country']['value']?>" class="countryLink"><?php echo $v['country']['value']?></a></td>
								<td><?php echo $v['visits']['value']?></td>
								<td><?php echo $v['visitDuration']['formatted_value']?></td>
								<td><?php echo $v['uniqueVisitors']['value']?></td>
								<td><?php echo $v['pagesPerVisit']['value']?></td>
								<td><?php echo $v['bounceRate']['formatted_value']?></td>
							</tr>
							<?php }?>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		
		<div class="col-md-4">
			<div class="panel panel-primary" id="regionList">
				<div class="panel-heading">
					<div class="panel-title">省级分布</div>
					<div class="panel-options">
						<a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>
						<a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
						<a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
						<a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
					</div>
				</div>
				<div class="panel-body no-padding scrolldiv" data-width="100%" data-height="420">
					<table class="table table-responsive table-striped">
						<thead><tr><th>地区</th><th>访客量</th><th>停留时长</th><th>UV</th><th>PPV</th><th>跳出率</th></tr></thead>
						<tbody></tbody>
					</table>
				</div>
			</div>
		</div>
		
		<div class="col-md-4">
			<div class="panel panel-primary" id="areaList">
				<div class="panel-heading">
					<div class="panel-title">市级分布</div>
					<div class="panel-options">
						<a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>
						<a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
						<a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
						<a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
					</div>
				</div>
				<div class="panel-body no-padding scrolldiv" data-width="100%" data-height="420">
					<table class="table table-responsive table-striped">
						<thead><tr><th>地区</th><th>访客量</th><th>停留时长</th><th>UV</th><th>PPV</th><th>跳出率</th></tr></thead>
						<tbody></tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	
	<div class="row">
		<div class="col-md-6">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<div class="panel-title">搜索关键词</div>
					<div class="panel-options">
						<a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>
						<a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
						<a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
						<a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
					</div>
				</div>
				
			</div>
		</div>
		
		<div class="col-md-6">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<div class="panel-title">搜索引擎</div>
					<div class="panel-options">
						<a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>
						<a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
						<a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
						<a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
					</div>
				</div>
				
			</div>
		</div>
	</div>

	<div class="panel panel-primary">
		<div class="panel-heading">
			<div class="panel-title">访问页面</div>
			<div class="panel-options">
				<a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>
				<a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
				<a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
				<a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
			</div>
		</div>
		<table class="table table-bordered table-responsive table-striped">
			<thead><tr><th>请求页面</th><th>标题</th><th>访问量</th><th>停留时长</th><th>UV</th><th>PPV</th><th>跳出率</th></tr></thead>
			<tbody>
				<?php foreach($pages['resultsRows'] as $v){?>
				<tr>
					<td><?php echo $v['entryPageUrl']['value']?></td>
					<td><?php echo $v['entryPageTitle']['value']?></td>
					<td><?php echo $v['visits']['value']?></td>
					<td><?php echo $v['visitDuration']['formatted_value']?></td>
					<td><?php echo $v['uniqueVisitors']['value']?></td>
					<td><?php echo $v['pagesPerVisit']['value']?></td>
					<td>
						<span class="label label-<?php echo $v['bounceRate']['value']>0.8?'danger':'info'?>"><?php echo $v['bounceRate']['formatted_value']?></span>
					</td>
				</tr>
				<?php }?>
			</tbody>
		</table>
	</div>
	
</div>

<script>
setTimeout(function(){
	Morris.Area({element: 'dashboard_chart',data: <?php echo json_encode($chart['rs'])?>,xkey: 'date',ykeys:['visits'],labels:['访问量']});
	$('.line').sparkline('html', {type: 'bar', barColor: '#445982'});
},500);
$('.countryLink').click(function(event){
	$.getJSON($(this).attr('href'),function(c){
		var s=[];
		$.each(c.resultsRows,function(i,d){
			s.push('<tr><td><a href="stats/area_traffic?state='+d.stateRegion.value+'&country="'+d.country.value+'" class="regionLink">'+d.stateRegion.value+'</a></td><td>'+d.visits.value+'</td><td>'+d.visitDuration.formatted_value+'</td><td>'+d.uniqueVisitors.value+'</td><td>'+d.pagesPerVisit.value+'</td><td>'+d.bounceRate.formatted_value+'</td></tr>');
		});
		$('#regionList tbody').html(s.join('')).find('a').first().click();
	});
	event.preventDefault();
}).first().click();
$('body').on('click','.regionLink',function(event){
	$.getJSON($(this).attr('href'),function(c){
		var s=[];
		$.each(c.resultsRows,function(i,d){
			s.push('<tr><td>'+d.city.value+'</td><td>'+d.visits.value+'</td><td>'+d.visitDuration.formatted_value+'</td><td>'+d.uniqueVisitors.value+'</td><td>'+d.pagesPerVisit.value+'</td><td>'+d.bounceRate.formatted_value+'</td></tr>');
		});
		$('#areaList tbody').html(s.join(''));
	});
	event.preventDefault();
});
$('.scrolldiv').slimscroll({alwaysVisible:true,size:3});
</script>